<template>
	<div class="wrapper">
		<div class="wrapperTop">
			<terminalSearch :text="numAll" @listen="listenToChildren" @reset="reset" showSerchBind="editRate">
			</terminalSearch>
		</div>
		<div class="wrapperCenter">
			<div class="content">
				<van-checkbox-group v-model="checked">
					<empty v-if="!posList.length"></empty>
					<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了"
						@load="getFindPageList">
						<div class="posItem" v-for="item in posList" :key="item.TUSN">
							<van-checkbox :name="item.TUSN" checked-color="#66d6ff" :disabled="!childData.agencySource">
								<div class="posInfo">
									<div class="left">
										<img class="posImg" v-if="item.USE_TYPE == 'DQPOS'" src="@/assets/posImg/dq.jpg"
											alt="" />
										<img class="posImg" v-else src="@/assets/posImg/ct.jpg" alt="" />
									</div>
									<div class="right" style="color: #000000">
										<div class="bind">
											<div style="font-weight: bold;display: flex;align-items: center">
												<text
													style="margin-right: 10px">{{ item.USE_TYPE_NAME }}-{{ item.COMPONENT_TYPE }}</text>
												<img v-if="item.AGENCY_SOURCE === 'LS'" style="height: 20px"
													src="@/assets/LS.png" />
												<img v-if="item.AGENCY_SOURCE === 'HLB'" style="height: 20px"
													src="@/assets/hlb.png" />
												<img v-if="item.AGENCY_SOURCE === 'QB'" style="height: 20px"
													src="@/assets/QB.png" />
												<img v-if="item.AGENCY_SOURCE === 'UEN'" style="height: 20px"
													src="@/assets/HK.png" />
											</div>
										</div>
										<div>TUSN：{{ item.TUSN }}</div>
										<div>入网费率：{{ item.t0CreditCardRate }}</div>
									</div>
								</div>
							</van-checkbox>
						</div>
					</van-list>
				</van-checkbox-group>
			</div>
		</div>
		<div class="wrapperBottom" v-if="posList.length">
			<div class="left">
				<van-checkbox checked-color="#66d6ff" :disabled="!childData.agencySource" @change="checkedAllClick"
					v-model="checkedAll">全选</van-checkbox>
			</div>
			<div class="right" @click="goBank">已选择{{ checked.length }}台</div>
		</div>
	</div>
</template>

<script>
	import {
		findSetPosFeeList
	} from '@/api/posManagement'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRouter()
			const state = reactive({
				childData: {},
				loading: false,
				finished: false,
				currentPage: 1,
				checkedAll: false,
				checked: [],
				numAll: 0,
				posList: []
			})

			const reset = val => {
				state.checked = []
				state.checkedAll = false
			}
			const listenToChildren = val => {
				state.childData = val
				state.posList = []
				state.finished = true
				state.loading = true
				state.currentPage = 1
				console.log(val, 'aaaaaa')
				getFindPageList()
			}

			const getFindPageList = () => {
				findSetPosFeeList({
					currentPage: state.currentPage,
					...state.childData
				}).then(res => {
					console.log(res.object.length < 10, res.object.length)
					if (res.object.length < 200) {
						state.finished = true
						state.loading = false
					} else {
						state.currentPage++
						state.finished = false
						state.loading = false

					}
					state.posList = state.posList.concat(res.object)
				})

			}
			const checkedAllClick = e => {
				state.checked = []
				if (e) {
					state.posList.forEach(item => {
						state.checked.push(item.TUSN)
					})
				}
			}
			const goBank = () => {
				if (!state.checked.length) {
					showToast('请选择终端机具')
					return
				}
				store.dispatch('data/GetposTusn', state.checked)
				store.dispatch('data/GetposTusnType', 'db')
				router.push({
					path: '/subEditRate',
					query: {
						agencySource: state.childData.agencySource
					}
				})
			}
			return {
				...toRefs(state),
				checkedAllClick,
				listenToChildren,
				getFindPageList,
				goBank,
				reset,
			}
		},
	})
</script>
<style scoped lang="scss">
	.wrapper {
		display: flex;
		height: 100vh;
		flex-direction: column;

		.wrapperTop {}

		.wrapperCenter {
			flex: 1;
			overflow: scroll;

			.content {
				padding: 0 10px;

				.posItem {
					background: #ffffff;
					opacity: 1;
					border-radius: 6px;
					padding: 10px;
					margin-top: 10px;
					display: flex;
					align-items: center;

					.posInfo {
						display: flex;
						align-items: center;
						font-size: 15px;
						font-family: 'Avenir', Helvetica, Arial, sans-serif;
						line-height: 25px;

						.left {
							img {
								width: 38px;
							}
						}

						.right {
							padding-left: 10px;
							flex: 1;

							.bind {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.button {
									padding: 0 10px;
									border: 1px solid #0056E9;
									opacity: 1;
									border-radius: 4px;
								}
							}
						}
					}
				}
			}
		}

		.wrapperBottom {
			padding: 14px;
			background: #ffffff;
			opacity: 1;
			border-radius: 0px;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
			}

			.right {
				width: 80px;
				height: 26px;
				background: #66d6ff;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: #ffffff;
				border-radius: 5px;
			}
		}
	}
</style>
<style>
	.van-checkbox {
		width: 100%;
	}

	.van-checkbox__label {
		flex: 1;
	}
</style>